import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form,
    Input,
    DatePicker,
    Select,
    Button,
    Card,
    InputNumber,
    Radio,
    Icon,
    Tooltip,
    Table,
    Modal,
    message,
    Slider,
    Upload,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {Link} from 'dva/router';
import G from '../../utils/g';
import moment from 'moment';
import Uploader from '../Goods/Uploader';


const FormItem = Form.Item;
const {Option} = Select;
const {RangePicker} = DatePicker;
const {TextArea} = Input;


@connect(state => ({
    indexGroup: state.indexGroup,
}))
@Form.create()
export default class BasicForms extends PureComponent {
    state = {
        clearImgs: false,
        detail: {}
    };

    componentWillUnmount() {
        const {dispatch} = this.props;
        dispatch({
            type: 'indexGroup/clear',
        });
    }

    componentDidMount() {
        const {dispatch, location} = this.props;
        this.id = G.getUrlValue('id', location.search);
        if (typeof this.id != 'undefined') {
            dispatch({
                type: 'indexGroup/fetchDetail',
                payload: {
                    id: this.id
                }
            })
        }
    };

    handleSubmit = e => {
        e.preventDefault();
        //this.props.form.resetFields();  //重置绑定表单数据
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                return false;
            }
            values.img = values.imgs[0].url;
            delete values.imgs;
            if (this.id) {
                values.id = this.id;
            }

            console.log(values);
            this.props.dispatch({
                type: 'indexGroup/groupSave',
                payload: values,
            }).then(res=> {
                console.log(res);
                if (res) {  //新增才会清除表单,修改不需要
                    if (values.id) {
                        message.success('修改成功');
                    } else {
                        message.success('新增成功');
                        this.props.form.resetFields();  //重置绑定表单数据
                        this.setState({
                            clearImgs: true,
                        });
                    }
                }
            })
        });
    };
    bindImgsChange = (file)=> {
        if (file.length == 0) {
            this.setState({
                clearImgs: true
            });
        }
        //console.log(this.postData);
    };

    render() {
        const id = this.id || '';
        const {clearImgs} = this.state;
        const {detail} = this.props.indexGroup;
        const {getFieldDecorator, getFieldValue,} = this.props.form;

        let imgsFileList = [];
        if (!clearImgs && detail.img) {
            const uid = G.uuid(16);
            imgsFileList = [{
                uid: uid,
                name: uid,
                status: 'done',
                url: detail.img,
            }]
        }

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const tableItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 17},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <div>
                <Card bordered={false}>
                    <Form onSubmit={this.handleSubmit} style={{marginTop: 8}}>
                        <FormItem {...formItemLayout} label="标题">
                            {getFieldDecorator('title', {
                                initialValue: detail.title,
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入分组标题',
                                    },
                                ],
                            })(<Input placeholder="请输入分组标题"/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="描述">
                            {getFieldDecorator('desc', {
                                initialValue: detail.desc,
                            })(<TextArea placeholder="请输入分组描述" rows={3}/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="分组图片" help="规格（200 * 200）">
                            {getFieldDecorator('imgs', {
                                initialValue: imgsFileList || '',
                                rules: [
                                    {
                                        required: true,
                                        message: '请上传分组图片',
                                    },
                                ],
                            })(
                                <Uploader
                                    length={1}
                                    fileList={imgsFileList}
                                    onChange={this.bindImgsChange}
                                />
                            )}
                        </FormItem>
                        {/*<FormItem {...formItemLayout} label="链接地址">
                         {getFieldDecorator('url', {
                         initialValue : detail.url,
                         rules: [
                         {
                         required: true,
                         message: '请输入链接地址',
                         },
                         ],
                         })(<Input placeholder="请输入链接地址"/>)}
                         </FormItem>*/}
                        <FormItem {...formItemLayout} label="展示类型">
                            {
                                getFieldDecorator('type', {
                                    initialValue: detail.type || 0,
                                })(
                                    <Radio.Group>
                                        <Radio value={0}>横向分类</Radio>
                                        <Radio value={1}>纵向分组</Radio>
                                    </Radio.Group>
                                )
                            }
                        </FormItem>
                        {
                            getFieldValue('type') == 1 ? <FormItem {...formItemLayout} label="展示样式">
                                {
                                    getFieldDecorator('display_style', {
                                        initialValue: detail.display_style || 0,
                                    })(
                                        <Radio.Group>
                                            <Radio value={0}><Icon type="bars"/><br/>独占一行</Radio>
                                            <Radio value={1}><Icon type="appstore"/><br/>四个宫格</Radio>
                                            <Radio value={2}><Icon type="credit-card"/><br/>一主三副</Radio>
                                            <Radio value={3}><Icon type="menu-fold"/><br/>横向滑动</Radio>
                                            <Radio value={4}><Icon type="table"/><br/>两排六个</Radio>
                                            <Radio value={5}><Icon type="layout"/><br/>一主两副</Radio>
                                        </Radio.Group>
                                    )
                                }
                            </FormItem> : null
                        }
                        <FormItem {...formItemLayout} label="请选择权重值" help="用于排序，值越大，排序越靠前">
                            <div>
                                {getFieldDecorator('weight', {
                                    initialValue: detail.weight || 0,
                                })(
                                    <Slider max={100} min={0} step={1}
                                            marks={{0: 0, 20: 20, 40: 40, 60: 60, 80: 80, 100: 100}}/>
                                )}
                            </div>
                        </FormItem>
                        <FormItem {...formItemLayout} label="上架状态">
                            {
                                getFieldDecorator('status', {
                                    initialValue: detail.status || 0,
                                })(
                                    <Radio.Group>
                                        <Radio value={0}>放入仓库</Radio>
                                        <Radio value={1}>上架</Radio>
                                    </Radio.Group>
                                )
                            }
                        </FormItem>
                        <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button style={{marginLeft: 8}}><Link to={`/index/group`}>返回</Link></Button>
                        </FormItem>
                    </Form>
                </Card>

            </div>
        );
    }
}
